<template>
    <div>
        <form class="card comment-form">
            <div class="card-block">
                <textarea class="form-control" placeholder="Write a comment..." rows="3" v-model="theComment"></textarea>
            </div>
            <div class="card-footer">
                <div class="info">
                    <img :src="article.author.image" class="comment-author-img" />
                    <nuxt-link class="author" :to="{
              name: 'profile',
              params: {
                username: article.author.username
              }
            }">
                        {{ article.author.username }}
                    </nuxt-link>
                </div>
                <button class="btn btn-sm btn-primary" @click="postComment()">
                    Post Comment
                </button>
            </div>
        </form>

        <div class="card" v-for="comment in comments" :key="comment.id">
            <div class="card-block">
                <p class="card-text">{{ comment.body }}</p>
            </div>
            <div class="card-footer">
                <nuxt-link class="comment-author" :to="{
          name: 'profile',
          params: {
            username: comment.author.username
          }
        }">
                    <img :src="comment.author.image" class="comment-author-img" />
                </nuxt-link>
                &nbsp;
                <nuxt-link class="comment-author" :to="{
          name: 'profile',
          params: {
            username: comment.author.username
          }
        }">
                    {{ comment.author.username }}
                </nuxt-link>
                <span class="date-posted">{{ comment.createdAt | date('MMM DD, YYYY') }}</span>
            </div>
        </div>
    </div>
</template>

<script>
// import { getComments, createComment } from '@/api/article'

export default {
    name: 'ArticleComments',
    props: {
        article: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            comments: [], // 文章列表
            theComment: ''
        }
    },
    async mounted() {
        const { data } = await getComments(this.article.slug)
        this.comments = data.comments
    },
    methods: {
        async postComment() {
          console.log("sdafsdfsdfsdf");
            let body = this.theComment
            let data = {
                "comment": {
                    "body": body
                }
            }
            // debugger
            // let res = await createComment(this.article.slug, data)
            let res = await createComment('8uxu42', data)
            // debugger
            console.log(res);
            
        }
    }
}
</script>

<style>
</style>
